<template>
  <div class="custom-legend">
    <ul class="legen-list"
      :style="{flexDirection: direction}">
      <li class="legen-item"
        v-for="(legen, index) in legens"
        :key="index"
        :ref="`item${index}`"
        @click="clickLegen(legen)">
        <div class="legen-name">
          <span class="dot"
            :style="{backgroundColor: linkage && legen.unSelect?'#666':legen.color}"></span>
          <p class="legen-text">{{legen.name}}</p>
        </div>
        <div class="legen-value"
          v-if="legen.dayValue === 0 || legen.dayValue">
          <span class="acens value-num"
            :ref="`dayValue${index}`"></span>
          <span class="value-unit"
            v-if="legen.dayUnit">{{legen.dayUnit}}</span>
        </div>
        <div class="legen-value"
          v-if="legen.value === 0 || legen.value">
          <span class="acens value-num"
            :ref="`value${index}`"></span>
          <span class="value-unit"
            v-if="legen.unit">{{legen.unit}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'CustomLagend',
  components: {},
  model: {
    prop: 'legens',
    event: 'change'
  },
  props: {
    legens: {
      type: Array,
      default: () => []
    },
    linkage: {
      type: Boolean,
      default: false
    },
    direction: { 
      type: String,
      default: 'row',
      validator: function(value) {
        return ['row', 'column'].indexOf(value) !== -1
      }
    }
  },
  data() {
    return {
      num: 0
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // console.log(this.$refs.value1)
  },
  beforeDestroy() {},
  methods: {
    clickLegen(legen) {
      if (!this.linkage) {
        return
      }
      let legens = this.legens.map((l, i) => {
        if (l.name === legen.name) {
          return { ...l, unSelect: !legen.unSelect }
        } else {
          return { ...l }
        }
      })
      this.$emit('change', legens)
      this.$emit('select', legen)
    },
    init() {
      let tl = new TimelineMax({}),
        tlArr = [],
        _this = this
      for (let i = 0; i < this.legens.length; i++) {
        const tlItem = TweenMax.to(this.$refs[`item${i}`], 0.3, { opacity: 1 })
        tlArr.push(tlItem)

        if (this.legens[i].dayValue) {
          let value = {num: 0}
          const tlDayValue = TweenMax.to(value, 1, {
            num: _this.legens[i].dayValue,
            roundProps: {num: 0.1},
            onUpdate: function() {
              // console.log(value.num)
              _this.$refs[`dayValue${i}`][0].textContent = value.num
            }
          })
          tlArr.push(tlDayValue)
        }

        if (this.legens[i].value) {
          let value = {num: 0}
          const tlValue = TweenMax.to(value, 1, {
            num: _this.legens[i].value,
            roundProps: {num: 0.1},
            onUpdate: function() {
              // console.log(value.num)
              _this.$refs[`value${i}`][0].textContent = value.num
            }
          })
          tlArr.push(tlValue)
        }
      }
      for (let i = 0; i < tlArr.length; i++) {
        // todo 优化文字出现时间
        tl.add(tlArr[i], '+=0.1')
      }
      return tl
    },
    update() {
      let tl = new TimelineMax({})
      let tlArr = []
      for (let i = 0; i < this.legens.length; i++) {
        const tlItem = TweenMax.fromTo(this.$refs[`item${i}`], 0.3, { opacity: 0.8, x: 0 },
        { opacity: 1, x: 10 })
        tlArr.push(tlItem)
      }
			for (let i = 0; i < tlArr.length; i++) {
        // todo 优化文字出现时间
        tl.add(tlArr[i], '+=0.1')
      }
      return tl
    },
    back() {
      let tl = new TimelineMax({})
      let tlArr = []
      for (let i = 0; i < this.legens.length; i++) {
        const tlItem = TweenMax.to(this.$refs[`item${i}`], 0.2, { opacity: 0.8, x: 0 })
        tlArr.push(tlItem)
      }
			for (let i = 0; i < tlArr.length; i++) {
        // todo 优化文字出现时间
        tl.add(tlArr[i], '+=0.1')
      }
      return tl
    }

  }
}
</script>
<style lang="scss" scoped>
$blue: #005cf0;
.custom-legend {
  color: #fff;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  .legen-list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    // height: 34px;
    /* border-right: 1px solid $blue;
    background: linear-gradient($blue 2px, transparent 0) no-repeat 414px,
      linear-gradient(0deg, $blue 2px, transparent 0) no-repeat 414px;*/

    .legen-item {
      display: flex;
      align-items: center;

      margin-bottom: 8px;

      opacity: 0;

      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      .legen-name {
        display: flex;
        align-items: center;

        width: 80px;
        min-height: 16px;
        padding-right: 5px;

        background: linear-gradient($blue 1px, transparent 0),
        linear-gradient(0deg, $blue 1px, transparent 0) no-repeat -4px,
        linear-gradient(
        -45deg,
        transparent 3px,
        $blue 3px,
        $blue 4px,
        transparent 0
        );
        background-size: 100% 100%, 100% 100%, 100% 100%;

        opacity: 1;

        cursor: pointer;
        &:nth-last-child(1) {
          margin-right: 0;
        }
      }
      .legen-value {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        width: 54px;
        margin-right: 10px;

        // text-shadow: 1px 1px 4px #00f7fa66, 1px -1px 4px #00f7fa66,
        // -1px 1px 4px #00f7fa66, -1px -1px 3px #00f7fa66;

        font-family: Arial, Helvetica, sans-serif;
        line-height: 16px;
        text-align: right;
        .value-num {
          font-size: 18px;
        }
        .value-unit {
          padding-left: 4px;
          font-size: 15px;
        }
        
      }
      .dot {
        display: inline-block;
        flex-shrink: 0;

        position: relative;

        width: 8px;
        height: 8px;
        margin: 0 4px 0 4px;
        padding: 1px;
        border: 1px solid #005cf080;

        background-color: $blue;
        background-clip: content-box;
        &:after, &:before {
          display: block;

          position: absolute;
          top: -1px;

          background: $blue;

          content: '';
        }
        &:before {
          left: -4px;

          width: 2px;
          height: 3px;
        }
        &:after {
          left: -3px;

          width: 1px;
          height: 8px;
        }
      }
      .unselect {
        background-color: #666 !important;
      }
      .legen-text {
        width: 100%;

        opacity: .8;

        text-align: center;
      }
    }
  }
}
</style>
